let controllbarStyle = require("./style/controllbar.less");
let controllbarHtml = require("./template/controllbar.html");
let playIcon = require("./icons/controller-play.icon");
let pauseIcon = require("./icons/controller-paus.icon");
let logoIcon = require("./icons/logo.icon");

const STOPSTATE = "ada-hmr-controllbar-stop";

let bar = {
	bar: null,
	isRunning(context) {
		let s = context.window.localStorage.getItem("ada-hmr-state");
		if (s === undefined) {
			s = true;
			context.window.localStorage.setItem("ada-hmr-state", "0");
		} else {
			if (s === "0") {
				s = true;
			} else {
				s = false;
			}
		}
		return s;
	},
	start(context) {
		controllbarStyle.active();
		playIcon.active();
		pauseIcon.active();
		logoIcon.active();
		let a = document.createElement("div");
		a.setAttribute("class", "ada-hmr-controllbar");
		a.innerHTML = controllbarHtml;
		this.bar = document.body.appendChild(a);
		[...this.bar.querySelectorAll(".ada-hmr-controllerbar-btn-paus")][0].addEventListener("click", () => {
			this.bar.classList.add(STOPSTATE);
			context.window.localStorage.setItem("ada-hmr-state", "1");
		});
		[...this.bar.querySelectorAll(".ada-hmr-controllerbar-btn-play")][0].addEventListener("click", () => {
			this.bar.classList.remove(STOPSTATE);
			context.window.localStorage.setItem("ada-hmr-state", "0");
		});
		this.ismove = false;
		if (this.isRunning(context)) {
			this.bar.classList.remove(STOPSTATE);
		} else {
			this.bar.classList.add(STOPSTATE);
		}
		return this;
	},
	getState(context) {
		return this.isRunning(context);
	},
	hide() {
		this.bar.style.display = "none";
	},
	show() {
		this.bar.style.display = "flex";
	},
	actionStart() {
		this.bar.classList.add("ada-hmr-controllbar-action");
	},
	actionDone() {
		this.bar.classList.remove("ada-hmr-controllbar-action");
	}
};

module.exports = bar;